<script setup lang="ts">
import { ref } from 'vue'
import CollapsiblePanel from './common/CollapsiblePanel.vue'
import ToggleButton from './common/ToggleButton.vue'
import InputField from './common/InputField.vue'
import CopyToClipboard from './common/CopyToClipboard.vue'

// 导入公共样式


// 定义landType属性以保持接口一致性
interface Props {
  landType?: string
}

withDefaults(defineProps<Props>(), {
  landType: '单独选址'
})

// 表单数据状态定义
const mineralDepositForm = ref({
  压覆情形: '不压覆', // '不压覆', '影响但不作压覆处理', '已办审批'
  压覆矿种: '',
  压覆矿业权名称: '',
  审批自然资源主管部门: ''
})

// 生成要复制的文本
const generateCopyText = (): string => {
  let paragraph: string = ''
  
  paragraph += `〔压覆重要矿产资源审批情况〕\n`
  
  if (mineralDepositForm.value.压覆情形 === "不压覆") {
    paragraph += `①该项目不压覆重要矿产资源。`
  } else if (mineralDepositForm.value.压覆情形 === "影响但不作压覆处理") {
    paragraph += `②该项目涉及压覆${mineralDepositForm.value.压覆矿种}等重要矿产资源，经项目所在市、县（市、区）人民政府牵头组织安全论证，结论为项目建设不影响矿产资源合理开采利用，不作压覆处理（项目压覆${mineralDepositForm.value.压覆矿业权名称}矿业权，已签订互不影响协议）。`
  } else if (mineralDepositForm.value.压覆情形 === "已办审批") {
    paragraph += `③该项目涉及压覆${mineralDepositForm.value.压覆矿种}等重要矿产资源，建设单位已按规定办理压覆矿产资源审批手续，${mineralDepositForm.value.审批自然资源主管部门}同意压覆上述重要矿产资源。`
  }
  
  return paragraph
}
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold text-blue-700 text-center mb-6">压矿情况单元</h1>
    
    <!-- 文件原文（可折叠） -->
    <CollapsiblePanel title="文件原文">
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">一、业务指导处室</h3>
        <p class="text-gray-600">矿产资源保护监督处、行政审批管理处</p>
      </div>
      
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">二、审查标准</h3>
        <ol class="list-decimal pl-5 text-gray-600 space-y-2">
          <li>单独选址项目应核实是否压覆重要矿产资源。</li>
          <li>单独选址项目压覆重要矿产资源的，应取得同意压覆的意见。</li>
          <li>单独选址项目压覆重要矿产资源的，按规定组织安全论证，且结论为项目建设不影响矿产资源合理开采利用的，不做压覆处理。</li>
        </ol>
      </div>
    </CollapsiblePanel>
    
    <!-- 审查内容模板（常驻显示） -->
    <div class="border border-gray-200 rounded-lg shadow mb-6 bg-white text-left">
      <div class="bg-gray-50 p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">三、审查内容模板</h2>
      </div>
      
      <div class="p-4">
        <!-- 压覆矿产资源审批情况 -->
        <div class="section-block blue mb-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-3">压矿情况单元不区分单选和批次，用的是同一套模板</h3>
          <div class="text-gray-700 space-y-3">
            <p>〔压覆重要矿产资源审批情况〕</p>
            
            <!-- 用户选择判断区 -->
            <div class="space-y-4 my-4">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="mineralDepositForm.压覆情形" 
                  :options="[
                    { label: '不压覆', value: '不压覆' },
                    { label: '影响但不作压覆处理', value: '影响但不作压覆处理' },
                    { label: '已办审批', value: '已办审批' }
                  ]" 
                />
                <label class="section-label red ml-2">压覆情形：</label>
              </div>
            </div>
            
            <!-- 不压覆情形 -->
            <div v-if="mineralDepositForm.压覆情形 === '不压覆'" class="text-blue-800 ml-4 pl-4">
              <p>①该项目不压覆重要矿产资源。</p>
            </div>
            
            <!-- 影响但不作压覆处理情形 -->
            <div v-else-if="mineralDepositForm.压覆情形 === '影响但不作压覆处理'" class="text-blue-800 ml-4 pl-4">
              <p>②该项目涉及压覆
                <InputField v-model="mineralDepositForm.压覆矿种" placeholder="煤、铁等" />
                等重要矿产资源，经项目所在市、县（市、区）人民政府牵头组织安全论证，结论为项目建设不影响矿产资源合理开采利用，不作压覆处理（项目压覆
                <InputField v-model="mineralDepositForm.压覆矿业权名称" placeholder="矿业权名称" />
                矿业权，已签订互不影响协议）。</p>
            </div>
            
            <!-- 已办审批情形 -->
            <div v-else-if="mineralDepositForm.压覆情形 === '已办审批'" class="text-blue-800 ml-4 pl-4">
              <p>③该项目涉及压覆
                <InputField v-model="mineralDepositForm.压覆矿种" placeholder="煤、铁等" />
                等重要矿产资源，建设单位已按规定办理压覆矿产资源审批手续，
                <InputField v-model="mineralDepositForm.审批自然资源主管部门" placeholder="*自然资源厅" width="12rem" />
                同意压覆上述重要矿产资源。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 复制按钮和显示复制的文本内容 -->
    <CopyToClipboard :text="generateCopyText()" />
  </div>
</template>

<style scoped>
/* 组件特定样式保留 */
</style>